<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用边框实现的图形</title>
        <style type="text/css">

            .wrapper {
                margin: 15px auto ;
            }

            .first {
                width: 0px ;
                height: 0px ;
                border-top: 100px solid blue ;
                border-bottom: 100px  solid red ;
                border-left: 100px solid green ;
                border-right: 100px solid grey ;
            }

            .second {
                width: 0px ;
                height: 0px ;
                border-top: 100px solid blue ;
                border-bottom: 100px  solid red ;
                border-left: 100px solid green ;
                border-right: 0px solid grey ;
            }

            .third {
                width: 0px ;
                height: 0px ;
                border-top: 100px solid blue ;
                /*border-bottom: 0px  solid red ;*/
                border-left: 100px solid green ;
                /*border-right: 0px solid grey ;*/
            }

            .fourth {
                width: 0px ;
                height: 0px ;
                /*border-top: 100px solid blue ;*/
                border-bottom: 100px  solid red ;
                /*border-left: 100px solid green ;*/
                border-right: 100px solid grey ;
            }

            .fifth {
                width: 0px ;
                height: 0px ;
                border-top: 100px solid transparent ;
                border-bottom: 100px  solid transparent ;
                border-left: 100px solid green ;
                border-right: 0px solid grey ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper first"></div>

        <div class="wrapper second"></div>

        <div class="wrapper third"></div>

        <div class="wrapper fourth"></div>

        <div class="wrapper fifth"></div>

    </body>
</html>